<template>
	<view>

		<gui-page-loading ref="guipageloading">
			<!-- 可以通过插槽添加自定义内容，如 加载提示文本 -->
			<text class="gui-block-text gui-text-small gui-text-center gui-color-gray gui-italic"
				style="padding-top:10rpx;">loading</text>
		</gui-page-loading>

		<view style="margin-top:15rpx" class="gui-flex gui-rows gui-space-between">
			<view class="gui-text-small demo gui-color-black gui-grids-icon gui-icons"
				style="font-size: 34rpx;font-weight: bold;">&#xe64c; {{status_words}}</view>
			<gui-row :customClasses="['gui-margin-top']" mainAxisAlignment="flex-end" v-if="status_words=='待核销'"
				@tap="scan">
				<view class="gui-grids-items" style="width: 210rpx;">
					<text class="gui-grids-icon gui-icons">&#xe631;</text>
					<text class="gui-grids-text">扫码核销</text>
				</view>
			</gui-row>
		</view>


		<view class="gui-margin-top" style="margin-left: 40rpx;">
			订单编号：{{order_sn}}
		</view>

		<view class="gui-margin-top" style="margin-left: 40rpx;">
			订单标题：{{order_name}}
		</view>



		<view class="gui-margin-top" style="margin-left: 40rpx;">
			付款时间：{{pay_time}}
		</view>
		
		<view class="gui-margin-top" style="margin-left: 40rpx;" v-if="is_heixao == 1">
			核销时间：{{hexiao_time}}
		</view>


		<view class="gui-margin-top" style="margin-left: 40rpx;">
			订单金额：{{order_money}}元
		</view>

		<view class="gui-margin-top" style="margin-left: 40rpx;">
			预约时间：星期{{week}}，{{st}}~{{et}}
		</view>

		<view class="gui-margin-top" style="margin-left: 40rpx;">
			下单用户：<image mode="aspectFill" :src="user_avatar" class="gui-card-img"></image>{{user_nickname}}
		</view>


		<view class="gui-margin-top gui-color-blue gui-bold gui-grids-icon gui-icons" style="font-size: 36rpx;"
			@tap="map_nav()">
			&#xe61c; {{address}}
		</view>

		<view class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-box-shadow">

			<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
				<image mode="aspectFill" :src="logo" class="gui-card-img"></image>
				<view class="gui-card-desc">
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<text class="gui-card-name gui-primary-text">{{shop_name}}</text>
						<!-- <text class="gui-text-small gui-primary-color">{{teacher_nickname}}</text> -->
					</view>


					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-top: 10rpx;">
						<text class="gui-card-text gui-block gui-third-text">营业时间：{{business_hours}}</text>
					</view>

					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center" style="margin-top: 10rpx;"
						@tap="call_mobile()">
						<text class="gui-card-text gui-block gui-third-text">商家电话：{{phone_number}}</text>
					</view>
				</view>
			</view>
			<view class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">

				<text class="gui-icons gui-color-gray gui-card-footer-item gui-border-r gui-bold"
					@tap="goto_shop_details()">&#xe608; 商家详情</text>

			</view>




		</view>



		<view class="gui-flex gui-rows gui-wrap gui-space-between gui-margin-top" style="margin-left: 20rpx;" v-if="refund_status==1 || refund_status==20">
			<view class="demo">
				<button type="default" class="gui-button gui-bg-green gui-noborder" @tap="all_refund()">
					<text class="gui-color-white gui-button-text">同意退款</text>
				</button>
			</view>

			<view class="demo">
				<button type="default" class="gui-button gui-bg-red gui-noborder" @tap="cancel_refund()">
					<text class="gui-color-white gui-button-text">拒绝退款</text>
				</button>
			</view>
		</view>



		<gui-modal ref="guimodal1" title="是否确认退款？">
			<!-- <view slot="content" class="gui-padding gui-bg-gray">
				<text class="gui-block-text gui-text-center gui-text gui-color-gray"
					style="line-height:100rpx; padding:10rpx;">确认退款？</text>
			</view> -->
			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<view slot="btns" class="gui-flex gui-rows gui-space-between">
				<view class="modal-btns gui-flex1" style="margin-right:80rpx;">
					<text class="modal-btns gui-color-gray" @tap="close1">取消</text>
				</view>
				<view class="modal-btns gui-flex1" style="margin-left:80rpx;">
					<text class="modal-btns gui-color-blue" @tap="confirm1">确认</text>
				</view>
			</view>
		</gui-modal>


		<gui-modal ref="guimodal2" title="请输入拒绝退款原因">
			<view slot="content" class="gui-padding gui-bg-gray">
				
				<view class="gui-margin-top">
					<textarea class="gui-textarea gui-bg-gray" style="width:690rpx; height:200rpx;"
						v-model="refund_cancel_reason" maxlength="50" placeholder="请输入拒绝原因,最多50字" />
				</view>
			</view>

			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<view slot="btns" class="gui-flex gui-rows gui-space-between">
				<view class="modal-btns gui-flex1" style="margin-right:80rpx;">
					<text class="modal-btns gui-color-gray" @tap="close2">取消</text>
				</view>
				<view class="modal-btns gui-flex1" style="margin-left:80rpx;">
					<text class="modal-btns gui-color-blue" @tap="confirm2">确认</text>
				</view>
			</view>
		</gui-modal>




	</view>

	</view>




</template>
<script>
	export default {
		data() {
			return {
				is_heixao:0,
				refund_cancel_reason:'',
				refund_money: '',
				id: 0,
				user_nickname: '',
				user_avatar: '',
				qrcode_img: "",
				order_name: "",
				pay_time: "",
				expire_day: "",
				coupon_code: "",
				address: "",
				order_money: 0,
				order_title: "",
				teacher_nickname: '',
				logo: '',
				business_hours: '',
				longitude: '',
				latitude: '',
				shop_id: 0,
				teacher_id: 0,
				status_words: '',
				week: '',
				st: '',
				et: '',
				shop_name: '',
				order_sn: '',
				refund_status: 0,
				phone_number: ''
			}
		},
		onLoad: function(query) {
			this.$globalMethod();
			if (typeof query.id != 'undefined') {
				this.orders_details(query.id)
			}
		},
		methods: {
			//01 居中弹出
			open1: function() {
				this.$refs.guipopup1.open();
			},
			close1: function() {
				this.$refs.guimodal1.close();
			},
			confirm1() {
				
			},
			confirm2() {
				
			},
			//01 居中弹出
			close2: function() {
				this.$refs.guimodal2.close();
			},
			all_refund() {
				this.$refs.guimodal1.open();
			},
			cancel_refund() {
				this.$refs.guimodal2.open();
			},
			bufen_refund() {
				this.open1();
			},
			goto_appointment() {
				uni.navigateTo({
					url: '/pages/order/reservation?id=' + this.id
				})
			},
			map_nav() {
				uni.openLocation({
					latitude: this.latitude,
					longitude: this.longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			goto_shop_details() {
				uni.navigateTo({
					url: '/pages/shop/shop_details?id=' + this.shop_id
				})
			},
			goto_teacher() {
				uni.navigateTo({
					url: '/pages/coach/details?id=' + this.teacher_id
				})
			},
			scan() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						console.log('条码内容：' + res.result);
					},
					fail: function(e) {
						uni.showToast({
							title: e.errorMsg,
							icon: 'error'
						})
					}
				});
			},
			orders_details(id) {
				let _this = this;
				_this.$refs.guipageloading.open();
				uni.request({
					url: _this.serverUrl + '/api.orders/teacher_order_info', //仅为示例，并非真实接口地址。
					data: {
						id: id
					},
					header: {
						token: _this.token
					},

					success: (res) => {

						_this.$refs.guipageloading.close();

						var return_data = res.data;


						console.log(return_data);
						if (return_data.code == 0) {
							_this.id = return_data.data.id;
							_this.order_sn = return_data.data.order_sn;
							_this.order_name = return_data.data.order_name;
							_this.pay_time = return_data.data.pay_time;
							_this.coupon_code = return_data.data.code;
							_this.address = return_data.data.address;
							_this.order_money = return_data.data.order_money;
							_this.teacher_nickname = return_data.data.teacher_nickname;
							_this.order_title = return_data.data.order_name;
							_this.logo = return_data.data.shop_logo;
							_this.business_hours = return_data.data.business_hours;
							_this.longitude = return_data.data.longitude;
							_this.latitude = return_data.data.latitude;
							_this.shop_id = return_data.data.shop_id;
							_this.teacher_id = return_data.data.teacher_id;
							_this.qrcode_img = return_data.data.qrcode;
							_this.status_words = return_data.data.status_words;
							_this.user_avatar = return_data.data.user_avatar;
							_this.user_nickname = return_data.data.user_nickname;
							_this.shop_name = return_data.data.shop_name;
							_this.refund_status = return_data.data.refund_status;
							_this.phone_number = return_data.data.phone_number;
							_this.is_heixao = return_data.data.is_heixao;

							var week = return_data.data.week;
							if (week == 1) {
								week = '一';
							}
							if (week == 2) {
								week = '二';
							}
							if (week == 3) {
								week = '三';
							}
							if (week == 4) {
								week = '四';
							}
							if (week == 5) {
								week = '五';
							}
							if (week == 6) {
								week = '六';
							}
							if (week == 7) {
								week = '日';
							}
							_this.week = week;
							_this.st = return_data.data.st;
							_this.et = return_data.data.et;


						} else {
							uni.showToast({
								title: return_data.msg,
								icon: 'error'
							})
						}
					}
				});
			}
		}
	}
</script>
<style scoped>
	.demo {
		width: 210rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 10rpx;
	}

	.demo-auto-width {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 10rpx;
	}

	.gui-text-small {
		font-size: 20rpx;
	}

	/* 卡片视图 */
	.gui-card-view {
		padding: 25rpx;
		margin: 0 30rpx;
		margin-top: 30rpx;
	}

	.gui-card-body {
		padding-bottom: 30rpx;
	}

	.gui-card-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 80rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
	}

	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}

	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}

	/* #endif */

	.demo {
		width: 210rpx;
		margin: 10rpx;
	}

	.button {
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 8rpx;
		margin: 10rpx;
	}

	.button-text {
		font-size: 38rpx;
		text-align: center;
	}

	.demo-close {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		opacity: 0.88;
		text-align: center;
		font-size: 58rpx;
	}

	.demo-lr {
		flex: 1;
		height: 200rpx;
	}

	.demo-lr-items {
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		overflow: hidden;
	}

	.modal-btns {
		line-height: 88rpx;
		font-size: 26rpx;
		text-align: center;
		width: 200rpx;
	}
</style>